import type { Directive } from 'vue'

// 创建一个动画观察者
const animateObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate__animated', 'animate__fadeInLeft')
      entry.target.addEventListener('animationend', () => {
        animateObserver.unobserve(entry.target)
      })
    }
  })
})
// 创建一个指令, 用于观察动画元素
export const animate: Directive = {
  mounted(el) {
    animateObserver.observe(el)
  },
  unmounted(el) {
    animateObserver.unobserve(el)
  },
}
